<template>
  <a-layout style="padding: 0px 30px 0px 30px; border-radius: 5%">
    <a-layout-sider
      breakpoint="lg"
      collapsed-width="0"
      @collapse="onCollapse"
      @breakpoint="onBreakpoint"
      :style="siderStyle"
    >
      <div class="logo" style="padding: 50px 50px 30px 50px">
        <img style="width: 100%" src="../../components/icons/G.svg" alt="" />
      </div>
      <a-menu v-model:selectedKeys="selectedKeys" theme="light" mode="inline">
        <a-menu-item key="1">
          <user-outlined />
          <span class="nav-text">
            <router-link to="/userSetting/commonSetting"
              >用户设置</router-link
            ></span
          >
        </a-menu-item>
        <a-menu-item key="2">
          <video-camera-outlined />
          <span class="nav-text"
            ><router-link to="/userSetting/equipmentSetting"
              >设备信息</router-link
            ></span
          >
        </a-menu-item>
        <a-menu-item key="3">
          <upload-outlined />
          <span class="nav-text"
            ><router-link to="/userSetting/accountSetting"
              >账号设置</router-link
            ></span
          >
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <!-- <a-layout-header :style="{ background: '#fff', padding: 0 }" /> -->
      <a-layout-content :style="{}">
        <div
          :style="{ padding: '24px', background: '#fff', minHeight: '590px' }"
        >
          <router-view></router-view>
        </div>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import type { CSSProperties } from "vue";
import {
  UserOutlined,
  VideoCameraOutlined,
  UploadOutlined,
} from "@ant-design/icons-vue";
import { useRouter } from "vue-router";
import { routes } from "@/router/routes";

const router = useRouter();
const onCollapse = (collapsed: boolean, type: string) => {
  console.log(collapsed, type);
};

const onBreakpoint = (broken: boolean) => {
  console.log(broken);
};

const selectedKeys = ref(["1"]);
const siderStyle: CSSProperties = {
  textAlign: "center",
  lineHeight: "120px",
  color: "#000",
  backgroundColor: "#fff",
};
router.afterEach((to: any, from, funture) => {
  // console.log(to.meta?.key);
  // selectedKeys.value = [to.meta?.key];
});
</script>
<style scoped>
#components-layout-demo-responsive .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}

.site-layout-sub-header-background {
  background: #fff;
}

.site-layout-background {
  background: #fff;
}

[data-theme="dark"] .site-layout-sub-header-background {
  background: #141414;
}
</style>
